<template>
    <div :style="styleColor" style="padding:0 5px">

        <!-- 头部 -->
    <div class="head">
        <div class="left">
            <img class="headerIMG" src="@/assets/images/bigViewIMG2/bluejiantou.png" alt="">
            <span>基本档案</span>
        </div>
        <div class="right" @click="jump">
            <span>详情</span>
            <img class="imgJT" src="@/assets/images/bigViewIMG2/jiantou.png" alt="">
        </div>
    </div>
        <div style="padding: 0 5px" >
            
            <div class="info" v-loading="loading">
               <template v-if="!loading">
                    <div class="info_title" v-if="info.fullName">{{ info.fullName }}</div>
                    
                    <!-- 企业标签 -->
                    <div class="classList">
                        <span class="menu_list" v-if="info.coClass">{{ info.coClass }}</span>
                        <span class="menu_list" v-for="(item,index) in info.enterpriseLabels" :key="index">{{ item }}</span>
                        <!-- <span class="more"> . . . </span> -->
                    </div>
                    <div class="companyName1" v-if="info.fullName">
                        <div class="left" v-if="loading==false">
                            <img src="@/assets/images/bigViewIMG2/fanwei.png" alt="">
                            经营范围：
                        </div>
                        <div class="right" :class="showAll ?'showScoll':''">
                            <span :class="showAll?'':'info_right'">{{ info.copRange }}</span>
                    
                    
                            <span class="zhank" @click="showAll=true" v-if="!showAll && info.copRange&&info.copRange.length>54">展开<i
                                    class="el-icon-arrow-down"></i></span>
                            <span class="zhank" @click="showAll=false" v-if="showAll && info.copRange && info.copRange.length > 54">收起<i
                                    class="el-icon-arrow-up"></i></span>
                        </div>
                    </div>
                    <div class="companyName" v-if="info.fullName">
                        <div class="left" v-if="loading==false">
                            <img src="@/assets/images/bigViewIMG2/dizhi.png" alt="">
                            企业地址：
                        </div>
                        <div class="right">{{ info.addrCo }}</div>
                    </div>
                    <div class="companyName" v-if="loading==false&& info.fullName">
                        <div class="left">
                            <img src="@/assets/images/bigViewIMG2/jianjie.png" alt="">
                            简介：
                        </div>
                        <div class="right">{{ info.copNote }}</div>
                    </div>
               </template>
            </div>
         
        </div>
    </div>
 
</template>

<script>
// import { getScreenItem } from '@/utils/screenStorage.js'
import { getSecondViewDate } from '@/api/views/index.js'
import { encrypt, decrypt } from '@/utils/AES.js'
export default {
    props: {    //仿照超链，props项保留
        value: Object,
        ispreview: Boolean
    },
    data(){
        return {
            options: {},
            info:{

            },
            showAll:false,
            loading:false
        }
    },
 
    computed:{
        transStyle() {
            // console.log('??????????????????', this.objToOne(this.options))
            return this.objToOne(this.options);
        },
        styleColor() {
            return {
                position: this.ispreview ? "absolute" : "static",

                width: this.transStyle.width + "px",
                height: this.transStyle.height + "px",
                left: this.transStyle.left + "px",
                top: this.transStyle.top + "px",
                // right: this.transStyle.right + "px"
                
            }
        },
       
    },
    created(){
        // 4lRX8PznY966PzpmZjqaEpkMTsKRpjysOrfaIcBMwr54ovSK5mG9WU43oAEAbFXC6UjwSzWNsQ67ON6DQIjf mQ1rHFeUJWMKjkSeR6s7dQ =
        // console.log(decrypt('4lRX8PznY966PzpmZjqaEpkMTsKRpjysOrfaIcBMwr54ovSK5mG9WU43oAEAbFXC6UjwSzWNsQ67ON6DQIjf+mQ1rHFeUJWMKjkSeR6s7dQ='));
        this.getList()
    },
    watch: {
        $route:{
            handler(val){
                // console.log(val);
                if (val.query.reportCode == "SecondView") {
                    this.getList()
                }else {
                    return
                }
                
              
            },
            deep:true
        }
    },
    mounted() {
        this.options = this.value

     

    },
    methods:{
        jump(){
           
            let query = JSON.parse(decrypt(this.$route.query.key))
            this.$router.push({
                path: '/visual/thirdView/basicFileMap',
                query: {
                    key: encrypt(JSON.stringify({
                        company: query.company,
                        text: '基本档案',
                        tradeCo: query.tradeCo
                    }))
                }
            })
        },
         getList(){
            
            // console.log('!!', this.$route.query.key);
            this.loading=true
            let code = decodeURIComponent(this.$route.query.key)
            let query = JSON.parse(decrypt(code))
            // console.log(query);
            getSecondViewDate(query.tradeCo).then(res=>{

                            // console.log('1111111111111111111111111111111111111111', res.data)
                this.loading = false
                this.info = res.data
            }).catch(err=>{
                this.loading = false
            })

        }
    }
}
</script>

<style scoped lang="scss">
.head {
    // padding: 0 5px;
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;

    .left {
        display: flex;
        align-items: center;

        .headerIMG {
            width: 40px;
            height: 40px;
        }

        span {
            color: #fff;
            margin-left: 10px;
            font-size: 15px;
        }
    }

    .right {
        cursor: pointer;
        display: flex;
        margin-right: 10px;
        align-items: center;

        span {
            color: #fff;
            font-size: 15px;
        }

        .imgJT {
            margin-left: 10px;
            width: 12px;
            height: 12px;
        }
    }
}

.main-top {
    display: flex;
    justify-content: space-between;
    .main {
        display: flex;
        flex-direction: column;
        .top {
            position: relative;
            img {
                width: 130px;
            }
            .jibie {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-70%);
                width: 100%;
                font-size: 16px;
                color: #00ffff;

            }
        }
        .bot {
            margin-top: 5px;
        }
    }
}
.info {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    height: 360px;
    ::v-deep .el-loading-mask {
            background-color: rgba(255, 255, 255, 0);
    
    
            .el-loading-spinner .circular {
                width: 30px;
                height: 30px;
            }
    
            .el-loading-spinner .path {
                stroke: #c23531;
                stroke-width: 8px;
            }
        }
    .classList {
        padding-left: 30px;
        // display: flex;
        text-align: start;
        overflow: auto;
        height: 80px;
        .menu_list {
                margin: 10px;
              color: #fff;
                    padding: 4px 10px ;
                    background-color: #006fff;
                    font-size: 14px;
                    border-radius: 5px;
                    line-height: 40px;
                    white-space:nowrap
        }
        .more {
            color: #fff;
            font-size: 20px;
            
        }
    }
    .info_title {
        padding-left:30px;
        text-align: start;
        color: #00dcf4;
        font-size: 20px;
        margin-bottom: 20px;
    }
    .companyName1 {
        margin-top: 10px;
        margin-bottom: 5px;
    //    height: 45px;
        display: flex;
        .left {
            width: 140px;
            color: #00ffff;
            text-align: start;
            img {
                width: 13px;
                height: 13px;
                margin-right: 5px;
            }
        }
        .right {
            flex:1;
            // height: 50px;
            text-align: start;
            color: #fff;
            .info_right {
                display: -webkit-box; // 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示  
                    -webkit-box-orient: vertical; // 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
                    -webkit-line-clamp: 2; // 用来限制在一个块元素显示的文本的行数，根据需要写。
                    overflow: hidden; // 溢出多余裁剪
            }
            .zhank {
                cursor: pointer;
                color: #00ffff;
                display: flex;
                justify-content: flex-end;
                margin-right:10px;
                font-size: 16px;
                i {
                    margin-top: 3px;
                    font-size: 16px;
                }
            }
            
           
        }
        .showScoll {
            height: 120px;
            overflow: auto;
        }
    }
    .companyName {
        margin-top: 10px;
        margin-bottom: 5px;
        //    height: 45px;
        display: flex;

        .left {
            width: 140px;
            color: #00ffff;
            text-align: start;
            img {
                width: 13px;
                height: 13px;
                margin-right: 5px;
            }
        }

        .right {
            flex: 1;
            // height: 50px;
            text-align: start;
            color: #fff;

            .info_right {
                display: -webkit-box; // 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示  
                -webkit-box-orient: vertical; // 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
                -webkit-line-clamp: 2; // 用来限制在一个块元素显示的文本的行数，根据需要写。
                overflow: hidden; // 溢出多余裁剪
            }

            .zhank {
                cursor: pointer;
                color: #00ffff;
                display: flex;
                justify-content: flex-end;
                margin-right: 10px;
            }


        }
    }
}


.title {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    text-align: start;
}
.main {
    color:#fff;
    // margin-top: 20px;
    font-size: 14px;
    display: flex;
    .main-left {
        flex:1;
        display:flex;
        flex-direction: column;
        align-items: flex-start;
        .main-left-info {

            margin-bottom: 40px;
            span {
                color: #00ffff;
            }
        }
    }
    .main-right{
        width:150px;
        text-align: center;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        padding: 0 10px 10px 10px;
        .main-right-info {
            margin-top: 10px;
            flex:1;
            border-bottom: 1px solid #ccc;
            display: flex;
            flex-direction: column;
            .name {
                margin-bottom: 10px;
            }
            .rating {
                flex:1;
                color: #ff9100;
                font-size: 25px;
                display: flex;
                align-items: center;
                justify-content: center;

            }
            
        }:last-child {
            border: none
        }
    }
    
}
</style>